@import '@/assets/styles/var';


.Product-display {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    margin-top: 5px;
    // padding: 0 10px;
    padding: 0 0px;
    width: 100%;
    .item {
        display: flex;
        // flex:1;
        flex: 0 0 100%;
        flex-wrap: wrap; 
        margin-bottom: 20px;
        padding: 0 0px;
        width: 100%;
        .pic-item {
            width: 30%;
            overflow: hidden;
            position: relative;
            .em {
                width: 80px;
                position: absolute;
                right: -28px;
                top: 4px;
                transform: rotate(45deg);
                overflow: hidden;
                white-space: nowrap;
                background-color: #ff3e2f;
                span {
                    display: block;
                    padding: 2px 0;
                    width: 100%;
                    color: #fff;
                    text-align: center;
                    font-size: 10px;
                }
            }
            .pic-box {
                // border: .5px solid #555;
                overflow: hidden;
                .img {
                    width: 100%;
                    transition: all .3s;
                    aspect-ratio: 303 / 303;
                }
                img {
                    width: 100%;
                    transition: all .3s;
                    aspect-ratio: 303 / 303;
                }
                ::v-deep(.preload-image) {
                    width: 100%;
                    img {
                        // padding: 10px;
                        width: 100%;
                        // width: 150px;
                        min-width: 50px;
                        min-height: 50px;
                        transition: all .3s;
                        aspect-ratio: 303 / 303;
                    }
                    &:hover {
                        img {
                            transform: scale(1.05);
                        }
                    }
                }
            }

        }
        .title {
            flex: 1;
            display: inline-block;
            margin-top: 0px;
            margin-left: 10px;
            padding: 0 2px;
            padding-right: 20px;
            height: 100%;
            // text-align: justify;
            text-justify: inter-word;
            hyphens: auto; /* 自动添加连词符 */
            line-height: 1.2;
            font-weight: bold;
            unicode-bidi: isolate;
            color: #111;
            h4 {
                margin-top: 0;
                width: 100%;
                color: #111;
                font-size: $vtsize-h4;  // 18px
                // font-weight: 600;
                line-height: 1.25;
                // background-color: #003abd;
                -webkit-line-clamp: 1;
            }

            p {
                margin-top: 4px;
                color: #111;
                font-weight: 400;
                font-size: $vtsize-p;   // 15px
                line-height: 1.1;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 3;
            }
            .learn-more {
                display: flex;
                margin-top: 8px;
                font-size: $vtsize-small;   // 14px
                font-weight: 700;
                color: #ef0000;
                // text-align: center;
                line-height: 26px;
                .more {
                    font-weight: 700;
                    color: #ef0000;
                }
                .iconfont {
                    margin-left: 5px;
                    font-size: 20px;
                }
            }
        }
        &:hover {
            .pic-item {

                .pic-box {
                    
                    img {
                        transform: scale(1.1);
                    }
                }

            }
            .title {
                h4 {
                    text-decoration: underline;
                }
                p {
                    text-decoration: underline;
                }
            }

        }
    }

}


// 问答列表

.Prob-display {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    margin-top: 5px;
    // padding: 0 10px;
    padding: 0 0px;
    width: 100%;
    .item {
        display: flex;
        // flex:1;
        flex: 0 0 100%;
        flex-wrap: wrap; 
        margin-bottom: 20px;
        padding: 0 0px;
        width: 100%;
        .pic-item {
            display: none;
            width: 30%;
            overflow: hidden;
            position: relative;
            .em {
                width: 80px;
                position: absolute;
                right: -28px;
                top: 4px;
                transform: rotate(45deg);
                overflow: hidden;
                white-space: nowrap;
                background-color: #ff3e2f;
                span {
                    display: block;
                    padding: 2px 0;
                    width: 100%;
                    color: #fff;
                    text-align: center;
                    font-size: 10px;
                }
            }
            .pic-box {
                // border: .5px solid #555;
                overflow: hidden;
                .img {
                    width: 100%;
                    transition: all .3s;
                    aspect-ratio: 303 / 303;
                }
                img {
                    width: 100%;
                    transition: all .3s;
                    aspect-ratio: 303 / 303;
                }
                ::v-deep(.preload-image) {
                    width: 100%;
                    img {
                        // padding: 10px;
                        width: 100%;
                        // width: 150px;
                        min-width: 50px;
                        min-height: 50px;
                        transition: all .3s;
                        aspect-ratio: 303 / 303;
                    }
                    &:hover {
                        img {
                            transform: scale(1.05);
                        }
                    }
                }
            }

        }
        .title {
            flex: 1;
            display: inline-block;
            margin-top: 0px;
            // margin-left: 10px;
            padding: 0 2px;
            padding-right: 20px;
            height: 100%;
            // text-align: justify;
            text-justify: inter-word;
            hyphens: auto; /* 自动添加连词符 */
            line-height: 1.2;
            font-weight: bold;
            unicode-bidi: isolate;
            color: #111;
            h4 {
                margin-top: 0;
                width: 100%;
                color: #111;
                font-size: $vtsize-h4;  // 18px
                // font-weight: 600;
                line-height: 1.25;
                // background-color: #003abd;
                -webkit-line-clamp: 1;
            }

            p {
                margin-top: 4px;
                color: #111;
                font-size: $vtsize-p;   // 15px
                line-height: 1.4;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 3;
            }
            .learn-more {
                display: flex;
                margin-top: 8px;
                font-size: $vtsize-small;   // 14px
                font-weight: 700;
                color: #ef0000;
                // text-align: center;
                line-height: 26px;
                .more {
                    font-weight: 700;
                    color: #ef0000;
                }
                .iconfont {
                    margin-left: 5px;
                    font-size: 20px;
                }
            }
        }
        &:hover {
            .pic-item {

                .pic-box {
                    
                    img {
                        transform: scale(1.1);
                    }
                }

            }
            .title {
                h4 {
                    text-decoration: underline;
                }
                p {
                    text-decoration: underline;
                }
            }

        }
    }

}